import { useEffect, useState } from "react";
import Unit from "../Unit";
import sty from "./Qipan.module.css";
export default function (props) {
  let [colorArr, setColorArr] = useState(Array(225).fill(0));
  let [history, setHistory] = useState([Array(225).fill(0)]);
  let [success, setSuccess] = useState(Array(225).fill(false));
  useEffect(() => {
    console.log(history);
  });
  let handleRst = () => {
    setColorArr(Array(225).fill(0));
    setHistory([Array(225).fill(0)]);
    setSuccess(Array(225).fill(false))
    props.reStrat();
  };
  let handleBack = () => {
    if (history.length <= 1) return;
    let pre = history[history.length - 2];
    setHistory(history.slice(0, history.length - 1));
    setColorArr(pre);
    setSuccess(Array(225).fill(false));
    props.back();
  };
  let handleClick = (index) => {
    if (!props.start) return;
    if (colorArr[index] !== 0) {
      return;
    }
    let status = props.click();

    let item = JSON.parse(JSON.stringify(colorArr));
    if (status) {
      item[index] = 1;
    } else {
      item[index] = 2;
    }
    setColorArr(item);
    setHistory(history.concat([item]));
    console.log(index);
    let end = check(item, index, status);
    if (end.value) {
      console.log("胜利" + (status ? "黑" : "白"));
      props.end(status);
      console.log('胜利组',end.successArr)
      let curSuccess=JSON.parse(JSON.stringify(success))
      end.successArr.forEach(item=>{
        curSuccess[item]=true
      })
      setSuccess(curSuccess)
    }
  };
  return (
    <div className="box">
      <div className={sty.pan}>
        {Array(225)
          .fill(null)
          .map((item, index) => {
            return (
              <div key={index} onClick={() => handleClick(index)}>
                <Unit color={colorArr[index]} success={success[index]}></Unit>
              </div>
            );
          })}
        <div className={sty.left}></div>
        <div className={sty.top}></div>
        <div className={sty.right}></div>
        <div className={sty.bottom}></div>
      </div>
      {props.start ? (
        ""
      ) : (
        <div className="rst">
          <button onClick={handleRst}>重新开始</button>
        </div>
      )}
      <div className="back">
        <button onClick={handleBack}>回退</button>
      </div>
    </div>
  );
}

function check(arr, center, status) {
  status ? (status = 1) : (status = 2);
  let flag1 = true;
  let flag2 = true;
  let flag3 = true;
  let flag4 = true;
  let currentLine;
  let start;
  let line;
  let bian;
  //横判断
  currentLine = parseInt(center / 15);
  for (let i = currentLine * 15; i < (currentLine + 1) * 15; i++) {
    if (arr[i] === status && center - i <= 4) {
      let flag = true;
      for (let j = i; j <= center; j++) {
        if (arr[j] !== status) {
          flag = false;
          break;
        }
      }
      if (flag) {
        start = i;
        break;
      }
    }
  }
  //start判断右
  for (let i = 0; i < 4; i++) {
    if ((start + i + 1 - 14) % 15 === 0 && i != 3) {
      flag1 = false;
    }
    if (arr[start + i + 1] !== status) {
      flag1 = false;
    }
  }
  if (flag1) {
    console.log("横");
    let successArr=[]
    for(let i=0;i<=4;i++){
      successArr.push(start+i)
    }
    return {value:true,successArr};
  }

  //竖判断
  currentLine = parseInt(center % 15);
  for (let i = currentLine; i < 225; i += 15) {
    if (arr[i] === status && center - i <= 4 * 15) {
      let flag = true;
      for (let j = i; j <= center; j += 15) {
        if (arr[j] !== status) {
          flag = false;
          break;
        }
      }
      if (flag) {
        start = i;
        break;
      }
    }
  }
  //start判断下
  for (let i = 0; i < 4; i++) {
    if (start + (i + 1) * 15 > 224 && i != 3) {
      flag2 = false;
    }
    if (arr[start + (i + 1) * 15] !== status) {
      flag2 = false;
    }
  }
  if (flag2) {
    console.log("竖");
    let successArr=[]
    for(let i=0;i<=4;i++){
      successArr.push(start+i*15)
    }
    return {value:true,successArr};
  }
  //  ↗判断
  line = parseInt(center / 15);
  if (center < (line + 1) * 14) {
    if (center % 14 <= 3) {
      flag3 = false;
    }
    currentLine = center % 14;
    bian = currentLine * 15;
  } else if (center === (line + 1) * 14) {
    currentLine = 14;
    bian = currentLine * 15;
  } else {
    if (center % 14 >= 11 || center % 14 === 0) {
      flag3 = false;
    }
    currentLine = 29 + ((center % 14) - 1) * 15;
    bian = (currentLine % 14) + 210;
  }
  if (flag3) {
    for (let i = currentLine; i <= bian; i += 14) {
      if (arr[i] === status && center - i <= 4 * 14) {
        let flag = true;
        for (let j = i; j <= center; j += 14) {
          if (arr[j] !== status) {
            flag = false;
            break;
          }
        }
        if (flag) {
          start = i;
          break;
        }
      }
    }
  }
  //start判断左下
  if (flag3) {
    for (let i = 0; i < 4; i++) {
      if ((start + (i + 1) * 14) % 15 == 0 && i != 3) {
        flag3 = false;
      }
      if (arr[start + (i + 1) * 14] !== status) {
        flag3 = false;
      }
    }
    if (flag3) {
      console.log("左下");
      let successArr=[]
      for(let i=0;i<=4;i++){
        successArr.push(start+i*14)
      }
      return {value:true,successArr};
    }
  }
  //↘判断
  line = parseInt(center / 15);
  console.log("line", line, center % 16);
  if (center < line * 16) {
    console.log("左");
    if (center % 16 <= 5) {
      flag4 = false;
    }
    currentLine = (15 - (center % 16)) * 15 + 15;
    bian = 208 + (center % 16);
  } else if (center === line * 16) {
    console.log("中");
    currentLine = 0;
    bian = 224;
  } else {
    console.log("右");
    if (center % 16 >= 11) {
      flag4 = false;
    }
    currentLine = center % 16;
    bian = 14 + (14 - currentLine) * 15;
  }
  if (flag4) {
    for (let i = currentLine; i <= bian; i += 16) {
      if (arr[i] === status && center - i <= 4 * 16) {
        let flag = true;
        for (let j = i; j <= center; j += 16) {
          if (arr[j] !== status) {
            flag = false;
            break;
          }
        }
        if (flag) {
          start = i;
          break;
        }
      }
    }
  }
  //start右下判断
  if (flag4) {
    for (let i = 0; i < 4; i++) {
      if ((start + (i + 1) * 16 - 14) % 15 == 0 && i != 3) {
        flag4 = false;
      }
      if (arr[start + (i + 1) * 16] !== status) {
        flag4 = false;
      }
    }
    if (flag4) {
      console.log("右下");
      let successArr=[]
      for(let i=0;i<=4;i++){
        successArr.push(start+i*16)
      }
      return {value:true,successArr};
    }
  }
  return{ value:false}
}


